<template>
	<div class="container">
        <!-- 这里的title是组件传值,传值是静态的，不需要动态绑定，直接写在等号右边就可以了 -->
		<Category title="游戏">
			<!-- scope 写法没有d, scope后面的名字可以随意定,games是插槽通过:games传过来的数据 ,这里的atguigu就是games数组,如果传递多个可以统一通过atguigu.数据拿到-->
			<template scope="atguigu">
				<ul>
					<li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category title="游戏">
			<!--{games}是解构赋值,直接拿到games数组 -->
			<template scope="{games}">
				<!-- 不同的结构 -->
				<ol>
					<li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
				</ol>
			</template>
		</Category>

		<Category title="游戏">
			<!--============ slot-scope是新的api,用法是差不多的(vue3只能用这种新的写法)================================== -->
			<template slot-scope="{games}">
				<h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
			</template>		</Category>

	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
	}
</script>

<style scoped>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>
